<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <% unless node.nil? %>
    <title>Ardtweeno <%= node %> Punchcard Graph</title>
  <% else %>
    <title>Ardtweeno Punchcard Graph</title>
  <% end %>
  <link href="/main.css" media="screen" rel="stylesheet" type="text/css" />
  
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  
  <link href="/bootstrap/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="/jquery/jquery-2.0.2.min.js"></script>
  <script type="text/javascript" src="/bootstrap/bootstrap.min.js"></script>

  
  <script type="text/javascript" src="/raphael/raphael-min.js"></script>
  <script type="text/javascript" src="/raphael/g.raphael.js"></script>
  <script type="text/javascript" src="/raphael/g.dot.js"></script>
  <script type="text/javascript">
      window.onload = function () {
        var r = Raphael("punchcard-holder"),
        xs = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        ys = [7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        
        <% unless ourGraphData.nil? %>
          data = <%= ourGraphData.to_s %>
        <% end %>
        
        <% unless ourGraphDays.nil? %>
        axisy = <%= ourGraphDays %>,
        <% end %>
        axisx = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];

        r.dotchart(10, 10, 620, 260, xs, ys, data, {symbol: "o", max: 10, heat: true, axis: "0 0 1 1", axisxstep: 23, axisystep: 6, axisxlabels: axisx, axisxtype: " ", axisytype: " ", axisylabels: axisy}).hover(function () {
          this.marker = this.marker || r.tag(this.x, this.y, this.value, 0, this.r + 2).insertBefore(this);
          this.marker.show();
        }, function () {
          this.marker && this.marker.hide();
        });
      };
    </script>
    <script type="text/javascript">keepUpdating = false;</script>
  </head>
 
  <body>
    <div id="content"><a href="/"><button id="punchcard-home" class="btn btn-large btn-inverse" type="button">Home</button></a></div>
    <h3 id="punchcard-title">Punchcard Graph for <%= node %></h3>
    <p id="punchcard-range"><%= ourGraphRange %></p>
    <div id="punchcard-holder"></div>
  </body>
 
</html>